<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <div class="divideAreaContainer">
      <div class="header">
        <div class="title">省</div>
        <div class="title">市</div>
        <div class="title">区</div>
        <div class="title">街道</div>
        <div class="title">社区</div>
      </div>
      <div class="content">
        <el-cascader-panel
          v-if="options.length > 0"
          ref="refSubCat"
          v-model="value"
          :options="options"
          :props="props"
          :show-all-levels="false"
          style="height: 100%"
          @change="handleChange"
        />
      </div>
    </div>
    <span slot="footer">
      <el-button @click="modelClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  components: {},
  data() {
    return {
      model: {},
      value: [],
      options: [],
      props: {
        multiple: true,
        value: 'no',
        label: 'name',
        emitPath: false
      },
      visible: false,
      title: '',
      width: '1000px'
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleChange(e) {
      const nodes = this.$refs['refSubCat'].getCheckedNodes()
      let nameStr = ''
      if (nodes && nodes.length) {
        for (let i = 0; i < nodes.length; i++) {
          const node = nodes[i]
          if (node.pathLabels && node.pathLabels.length) {
            nameStr += node.pathLabels.join('') + ','
          }
        }
      }
      // 拿到中文地址字符串
      this.model.serviceArea = nameStr.replace(/,$/, '')
    },
    edit(rowData) {
      this.visible = true
      this.init()
      this.getDetail(rowData)
    },
    init() {
      this.value = []
      this.getAddress()
    },
    // 获取行政区划
    getAddress() {
      if (this.$store.getters.region.length > 0) {
        this.options = this.$store.getters.region
      } else {
        setTimeout(() => {
          this.options = this.$store.getters.region
        }, 2000)
      }
    },
    getDetail(rowData) {
      this.model.mealCompanyNo = rowData.mealCompanyNo
      this.value = rowData.serviceAreaCode ? rowData.serviceAreaCode.split(',') : []
    },
    submitForm() {
      this.model.serviceAreaCode = this.value.join(',')
      this.$store.dispatch('app/setLoading', true)
      postAction('/dxhMealCompany/updateServiceArea', this.model).then((res) => {
        if (res.status === 0) {
          this.modelClose()
          this.$message.success(res.message || '操作成功！')
          this.$emit('ok')
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    modelClose() {
      this.visible = false
    },
    handleCancel(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.divideAreaContainer {
  height: 600px;
  display: flex;
  flex-direction: column;
  ::v-deep .el-cascader-menu__wrap{
    height: 100%;
  }
  .header {
    background-color: #f2f2f2;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    padding: 0 100px;
    flex-shrink: 0;
  }

  .content {
    flex-grow: 1;
    overflow: hidden;
  }
}
</style>
